<!--
  功能：
  作者：parker
  邮箱：geekpark@icloud.com
  微信：wzb10746
  时间：2023年08月21日 20:23:31
  版本：
  文件: src/pages/tabbar/home.vue
-->

<template>
  <!-- 替换 -->
  <u-sticky :offset-top="0" :customNavHeight="0">
    <view class="header">
      <u-icon size="22" name="../../static/images/icon-homeMoreEntry.png" />
      <u-tabs
        class="header-tabs"
        :list="tabList"
        :current="1"
        lineColor="#FF2442"
        :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#8C8C8C',
        }"
        lineWidth="25"
        lineHeight="3"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
        @click="tabClick"
        @change="tabChange"
      ></u-tabs>
      <u-icon name="search" color="#333" size="28"></u-icon>
    </view>
  </u-sticky>

  <u-tabs
    :list="categories"
    lineHeight="0"
    :activeStyle="{
      color: '#333',
      fontWeight: 'bold',
      fontSize: '13px',
    }"
    :inactiveStyle="{
      color: '#8C8C8C',
      fontSize: '13px',
    }"
  />

  <view class="content">
    <view class="content-wrap bs-listWrapper">
      <view class="marsonry-flex-column bs-listWrapper-column">
        <view v-for="item in interestList" style="height: auto" :key="item.id">
          <ContentItem
            :imgCover="filerItemData(item).url"
            :title="item.title"
            :userInfo="{
              nickname: item.user.nickname,
              avatar: item.user.images,
            }"
            :likes="item.likes"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onBeforeMount,
  reactive,
  toRefs,
  computed,
  nextTick,
} from "vue";
import { storeToRefs } from "pinia";
import BScroll from "better-scroll";
import { onLoad } from "@dcloudio/uni-app";
const { devicePixelRatio } = uni.getDeviceInfo();
import ContentItem from "@/components/items/contentItem";
import { useUserStore } from "../../pinia";
import { HOME_TAB_LIST } from "../../common/const";
const store = useUserStore();
const { count } = storeToRefs(store);
const { increment } = store;
const mainData = reactive({
  categories: [], // 分类列表
  interestList: [], // 兴趣内容列表
});
let bs;
const tabList = ref(HOME_TAB_LIST);

const initBs = () => {
  // beterScroll初始化
  // bs = new BScroll('.bs-listWrapper', {
  // 	scrollX: false,
  // 	scrollY: true,
  // 	slide: {
  // 		threshold: 100
  // 	},
  // 	pullUpLoad: true,
  // 	pullDownRefresh: true,
  // 	momentum: false,
  // 	bounce: true,
  // 	stopPropagation: true
  // })
  // console.log({ bs })
  // bs.on('scroll', (position) => {
  // 	console.log(position.x, position.y)
  // })
  // //   bs.on('mousewheelMove', (e) => {
  // // 	console.log(e)
  // //   })
};

// 头部tabs点击回调
const tabClick = (e) => {};
// 头部tabs切换监听
const tabChange = (e) => {
  console.log(e);
};

// 添加注释：此函数用于过滤和处理项目数据
const filerItemData = (item, type = "cover") => {
  const { images_list = [] } = item;
  const { url, url_size_large, width, height } = images_list[0];
  const pixelRatio = width / 350;
  if (type === "cover") {
    return {
      url,
      url_size_large,
      width: `${width / pixelRatio}upx`,
      height: `${height / pixelRatio}upx`,
    };
  }
};

// onLoad建议放在最底部  保证onLoad中调用的函数声明在onLoad上面
onLoad(async () => {
  const { proxy } = getCurrentInstance();
  setTimeout(() => {
    initBs();
  }, 300);
  const [
    {
      code: sCode,
      data: { categories = [] },
    },
    { code: iCode, data: interestList },
  ] = await Promise.all([
    proxy.$http.getFindSortList(),
    proxy.$http.getInterestList(),
  ]);
  if (sCode === 0) {
    mainData.categories = categories;
  }
  if (iCode === 0) {
    mainData.interestList = interestList;
  }
});

const { categories, interestList } = toRefs(mainData);
</script>


<style lang="scss" scoped>
page {
  padding-bottom: 200rpx;
}
.header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  border-bottom: 1px solid #eee;

  &-tabs {
  }
}

.content {
  background-color: #f7f7f7;
  padding: 4upx;

  &-wrap {
  }
}

.bs-listWrapper {
  padding: 5rpx;
  &-column {
    column-count: 2;
    column-fill: balance;
    column-gap: 10rpx;
  }

  &-item {
    align-items: center;
    border-radius: 6upx;
    overflow: hidden;
    margin-bottom: 20upx;
    background-color: #fff;
    break-inside: avoid;
    box-sizing: border-box;
    margin-bottom: 10rpx;
    &-title {
      font-size: 14px;
      font-weight: 500;
      color: $uni-color-title;
      padding: 18upx;
    }

    &-footer {
      padding: 0 18upx 20upx;
      font-size: 12px;
      color: #666;
    }
  }
}

:deep(.u-tabs__wrapper__nav) {
  flex: 1;
  width: 100%;
  display: flex;
}
</style>
